<template>
<div  class="xs-echarts-twor" id="twor">
   
</div>
</template>

<script>
import echarts from "echarts";

export default {
  components: {
    
  },
  props: {},
  data() {
    return {
       myChart3:null,
      placeHoledStyle3:{},
      dataStyle3:{},
       option3:{},
       grid:{},
    };
  },
  watch: {},
  computed: {
  },
  methods: {
    twor() {
     
        this.myChart3 = echarts.init(document.getElementById("twor"));
      this.placeHoledStyle3 = {
        normal: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        },
        emphasis: {
          barBorderColor: "rgba(0,0,0,0)",
          color: "rgba(0,0,0,0)"
        }
      };
      

      this.dataStyle3 = {
        normal: {
          label: {
            show: true,
            position: "insideLeft",
            formatter: "{c}"
          }
        }
      };
      this.option3 = {
        backgroundColor: "rgba(0,0,0,0)",
        title: {
          text: "葡萄酒",
          left: "center",
          top: '3%',
          fontSize:'14',
          textStyle: {
            color: "#fff",
            font: "10px Microsoft YaHei",
            fontWeight:'normal',
          },
        },
     
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          }
        },
          grid:{
  
  left: 24,
  top: 400, 
  right: 24, 
  bottom: 24, 
  
  width:'100%', 
  height:'100%',
},
         legend: {
          type: "",
          orient: "horizontal",
          // x: "right",
          top: "90%",
          left: "12%",
          // bottom: "0%",
          itemWidth: 13,
          itemHeight: 8,
          itemGap: 16,
          textStyle: {
            color: "#A3E2F4",
            fontSize: 13,
            fontWeight: 0
          },
          data: ["柏思丽干白葡萄酒", "百汇桃红葡萄酒", "柏思丽干红葡萄酒", "甜红葡萄酒"]
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            center: ["50%", "40%"],
            color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [
              {
                value: 1491,
                name: "柏思丽干白葡萄酒"
              },
              {
                value: 1288,
                name: "百汇桃红葡萄酒"
              },
              {
                value: 687,
                name: "柏思丽干红葡萄酒"
              },
              {
                value: 871,
                name: "甜红葡萄酒"
              }
            ].sort(function(a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",

            label: {
              normal: {
                formatter: ["{d|{d}%}", "{b|{b}}"].join("\n"),
                rich: {
                  d: {
                    color: "rgb(241,246,104)",
                    fontSize: 14,
                    fontWeight: "bold",
                    lineHeight: 5
                  },
                  b: {
                    color: "rgb(98,137,169)",
                    fontSize: 10,
                    height: 20
                  }
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgb(98,137,169)"
                },
                smooth: 0.2,
                length: 1,
                length2: 10
              }
            },
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 50
              }
            }
          }
        ]
      };

      this.myChart3.setOption(this.option3);
      window.addEventListener("resize", () => {
        this.myChart3.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.$nextTick(function() {
 
   this.twor()
    });
  }
};
</script>


<style lang="scss" scoped>
.xs-echarts-twor{
   height: 400px;
  width: 100%;
}
</style>
